<template>
  <el-dialog
    v-model="elementInfoVisible"
    :title="$t('mall.shipping_information')"
    width="60%"
    center
  >
    <div class="m-b-50">
      <div>
        <Table
          :data="mailingData.bomData"
          :columns="columnsType[0][props.type]"
          serial
          :serialOptions="{
            pageNum: mailingData.list.pageNumber,
            pageSize: mailingData.list.pageSize,
          }"
        >
          <template #btnSlot="{ scope }">
            <el-button size="small" type="warning" @click="deleteBomRow(scope.row)">{{
              $t('om.Deleting')
            }}</el-button>
          </template>
        </Table>
        <Pagination
          class="m-b-10"
          v-show="mailingData.list.totalRow > 0"
          :total="mailingData.list.totalRow"
          v-model:page="mailingData.list.pageNumber"
          v-model:limit="mailingData.list.pageSize"
          @pagination="handlePaginationChange"
        />
      </div>
      <div>
        <Table
          :data="mailingData.pcbList.list"
          :columns="pcbColumns"
          serial
          :serialOptions="{
            pageNum: mailingData.pcbList.pageNumber,
            pageSize: mailingData.pcbList.pageSize,
          }"
        >
          <!-- <template #btnSlot="{ scope }">
            <el-button size="small" type="warning" @click="deleteBomRow(scope.row)"> {{ $t('smt.Deleting') }}</el-button>
          </template> -->
        </Table>
        <Pagination
          class="m-b-10"
          v-show="mailingData.pcbList.totalRow > 0"
          :total="mailingData.pcbList.totalRow"
          v-model:page="mailingData.pcbList.pageNumber"
          v-model:limit="mailingData.pcbList.pageSize"
          @pagination="handlePaginationPcbChange"
        />
      </div>
    </div>
    <el-dialog v-model="centerDialogVisible" :title="$t('om.Prompts')" width="30%" center>
      <span>
        {{ $t('om.Deleting') }} {{ mailingData.type }}
        {{ $t('mall.confirm_modify_delete_order', { name: props.serial }) }}
      </span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">{{ $t('smt.Cancel') }}</el-button>
          <el-button type="primary" @click="confirmDeletion"> {{ $t('smt.Define') }} </el-button>
        </span>
      </template>
    </el-dialog>
  </el-dialog>
</template>
<script setup>
import { ref, onMounted, reactive, computed } from 'vue';
import Table from '@/components/Table/index.vue';
import {
  getBomOrderDetail,
  deleteBomOrderDetail,
  queryPagePcbaSmtBomOrderExpressList,
  queryPagePcbaSmtPcbExpressMaterialsList,
  deleteExpressMaterialsId,
  queryPcbaPcbOrderList,
} from '@/server/api/biz.js';
import { ElMessage } from 'element-plus';
import Pagination from '@/components/Pagination/index.vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const props = defineProps({
  type: {
    type: String,
    default: '',
  },
  serial: {
    type: String,
    default: '',
  },
  bomData: {
    type: Object,
    default: () => {},
  },
  bomId: {
    type: String,
    default: '',
  },
});

const centerDialogVisible = ref(false);

const columnsType = computed(() => [
  {
    1: [
      {
        label: t('use.MailingComponents'),
        prop: 'elementInfo',
      },
      {
        label: t('om.Numberofdemands'),
        width: '200px',
        prop: 'materialsQuantity',
      },
    ],
    2: [
      {
        label: t('use.MailingComponents'),
        prop: 'elementInfo',
        status: 'toBeMailed',
      },
      {
        label: t('om.Numberofdemands'),
        width: '200px',
        prop: 'totalQuantity',
      },
      {
        label: t('smt.Operational'),
        width: '150px',
        type: 'btn',
      },
    ],
  },
]);
const pcbColumns = computed(() => [
  {
    label: t('om.MailedPCBs'),
    prop: 'waitingMailing',
  },
  {
    label: t('om.MailingQuantity'),
    width: '200px',
    prop: 'orderPcbNumberPcb',
  },
]);
const mailingData = reactive({
  list: {
    list: [],
    pageNumber: 1,
    pageSize: 10,
    totalRow: 0,
  },
  pcbList: {
    list: [],
    pageNumber: 1,
    pageSize: 10,
    totalRow: 0,
  },
  bomData: [],
  pcbData: [],
  serialNumber: '',
  type: '',
  id: '',
});

/**
 * 获取bom详情
 */
const getBomOrderDetailList = (page = 1, limit = 10, id = '') => {
  const obj = {
    bomSerial: '',
    comments: '',
    customerAccountId: 0,
    description: '',
    designator: '',
    footprint: '',
    id: 0,
    layer: 0,
    limit: limit,
    manufacturer: '',
    manufacturerPn: '',
    minimumOrderQuantity: 0,
    minimunPackageQuantity: 0,
    name: '',
    page: page,
    pageType: 1,
    patchStatus: 0,
    pcbaOrderId: id,
    productId: 0,
    serial: '',
    smtOrderId: 0,
    source: 2,
    status: 0,
    supplier: '',
    supplierPn: '',
    supplyQuantity: 0,
  };
  getBomOrderDetail(obj).then((res) => {
    if (res.code === 200) {
      mailingData.list = res.data;
      mailingData.bomData = res.data.list;
    } else {
      ElMessage.error(res.msg);
    }
  });
};

/**
 * 获取pcb邮寄列表详情
 */
const getQueryPcbaPcbOrderList = (page = 1, limit = 10, id = '') => {
  mailingData.pcbData = [];
  const obj = {
    customerAccountId: 0,
    dataSource: 3,
    endTime: '',
    limit: limit,
    orderStatus: 0,
    page: page,
    pageType: 0,
    pcbLayer: '',
    pcbStatus: 0,
    pcbaOrderId: id,
    productId: 0,
    serial: '',
    startTime: '',
  };
  queryPcbaPcbOrderList(obj).then((res) => {
    if (res.code === 200) {
      mailingData.pcbData = res.data.list;
      mailingData.pcbList = res.data;
    } else {
      ElMessage.error(res.msg);
    }
  });
};

/**
 * 获取邮寄记录列表 邮寄信息 bom 邮寄元器件列表
 */
const getQueryPagePcbaSmtBomOrderExpressList = (page = 1, limit = 10, id = '') => {
  const obj = {
    bomId: 0,
    customerAccountId: 0,
    expressId: id,
    limit: limit,
    materialsType: 0,
    orderStatus: 0,
    page: page,
    pageType: 0,
    pcbOrderId: 0,
    pcbaOrderId: 0,
    productId: 0,
    serial: '',
    smtOrderDetailId: 0,
    smtOrderId: 0,
  };
  queryPagePcbaSmtBomOrderExpressList(obj).then((res) => {
    if (res.code == 200) {
      mailingData.list = res.data;
      mailingData.bomData = res.data.list;
    }
  });
};

/**
 * 获取邮寄记录列表 邮寄信息 pcb 邮寄pcb列表
 */
const getQueryPagePcbaSmtPcbExpressMaterialsList = (page = 1, limit = 10, id = '') => {
  const obj = {
    bomId: 0,
    customerAccountId: 0,
    expressId: id,
    limit: limit,
    materialsType: 0,
    orderStatus: 0,
    page: page,
    pageType: 0,
    pcbOrderId: 0,
    pcbaOrderId: 0,
    productId: 0,
    serial: '',
    smtOrderDetailId: 0,
    smtOrderId: 0,
  };
  queryPagePcbaSmtPcbExpressMaterialsList(obj).then((res) => {
    if (res.code == 200) {
      mailingData.pcbData = res.data.list;
      mailingData.pcbList = res.data;
    }
  });
};

/**
 * 分页
 * @param {*} page
 * @param {*} limit
 */
const handlePaginationChange = (page = 1, limit = 10) => {
  getBomOrderDetailList(page, limit, props.bomId);
};

const handlePaginationPcbChange = (page = 1, limit = 10) => {
  getPcblist(page, limit);
};

/**
 * 删除bom行
 * @param {*} row
 */
const deleteBomRow = (row) => {
  mailingData.type = row.supplierPn;
  centerDialogVisible.value = true;
  mailingData.id = row.id;
};

const confirmDeletion = () => {
  deleteBomOrderDetail(mailingData.id).then((res) => {
    if (res.code === 200) {
      getList();
      ElMessage.success(t('mall.delete_successful'));
      centerDialogVisible.value = false;
    } else {
      ElMessage.error(res.msg);
      centerDialogVisible.value = false;
    }
  });
};
defineExpose({
  getBomOrderDetailList,
  getQueryPcbaPcbOrderList,
  getQueryPagePcbaSmtBomOrderExpressList,
  getQueryPagePcbaSmtPcbExpressMaterialsList,
});
onMounted(() => {
  if (props.type === '2') {
    // getList();
  } else {
    // getBomlist();
    // getPcblist();
  }
});
</script>
<style lang="scss" scoped>
.m-b-50 {
  padding-bottom: 30px;
}
.m-b-10 {
  margin-bottom: 10px;
}
</style>
